﻿<template id="product-box-list-vue" asp-footer="true">
    <b-card no-body class="product-box show list product-provider mb-3">
        <template v-if="Model.Flag !== null">
            <div class="flag-label" v-html="Model.Flag"></div>
        </template>
        <div class="picture-container">
            <b-link class="img-container" :href="'/' + Model.SeName" :title="Model.DefaultPictureModel.Title">
                <b-img-lazy width="150" height="200" :alt="Model.DefaultPictureModel.AlternateText" class="main-product-img" :src="Model.DefaultPictureModel.ImageUrl" :title="Model.DefaultPictureModel.Title"></b-img-lazy>
                <template v-if="Model.SecondPictureModel.ImageUrl !== null">
                    <b-img-lazy width="150" height="200" class="hover-img" :alt="Model.SecondPictureModel.AlternateText" :src="Model.SecondPictureModel.ImageUrl"></b-img-lazy>
                </template>
            </b-link>
        </div>
        <b-card-body>
            <h5 class="card-title">
                <a :href="'/' + Model.SeName"> {{Model.Name}} </a>
            </h5>
            <template v-if="Model.ShowSku && Model.Sku !== null">
                <span class="sku">{{Model.Sku}}</span>
            </template>
            <div class="prices-rating">
                <template v-if="Model.ReviewOverviewModel.AllowCustomerReviews">
                    <div class="rating">
                        <template v-if="Model.ReviewOverviewModel.TotalReviews > 0">
                            <b-form-rating :id="'rating-inline-grid-' + Model.Id" class="p-0" variant="gold" aria-label="Rating" no-border size="sm" show-value precision="2" readonly inline :value="Model.ReviewOverviewModel.RatingSum / Model.ReviewOverviewModel.TotalReviews"></b-form-rating>
                        </template>
                        <template v-else>
                            <b-form-rating :id="'rating-inline-grid-' + Model.Id" class="p-0" variant="gold" no-border size="sm" show-value precision="2" readonly inline :value="0"></b-form-rating>
                        </template> <b-link :href="'/' + Model.SeName">{{Model.ReviewOverviewModel.TotalReviews}} @Loc["Reviews.Overview.Reviews"]</b-link>
                    </div>
                </template>
                <template v-if="Model.ProductType == 25">
                    <template v-if="Model.EndTime !== null">
                        <div class="countdown-box alert alert-info w-100 mb-1">
                            <template v-if="new Date(Model.EndTime).getTime() > new Date().getTime()">
                                <countdown :end-time="new Date(Model.EndTime).getTime()">
                                    <template v-slot:process="{ timeObj }">
                                        <span class="col-form-label">@Loc["AddToCart.Timeleft"]:</span>
                                        <span>{{ `${timeObj.d}` }} : </span>
                                        <span>{{ `${timeObj.h}` }} : </span>
                                        <span>{{ `${timeObj.m}` }} : </span>
                                        <span>{{ `${timeObj.s}` }}</span>
                                    </template>
                                    <template v-slot:finish>
                                        <span>@Loc["ShoppingCart.Auctionends"]</span>
                                    </template>
                                </countdown>
                            </template>
                            <template v-else>
                                <div class="d-inline-flex flex-wrap justify-content-center">
                                    <label class="ended-label">@Loc["ShoppingCart.Auctionends"]:</label>
                                    <div class="count-date">{{Model.EndTimeLocalTime.Value}}</div>
                                </div>
                            </template>
                        </div>
                    </template>
                </template>
                <div class="prices" v-bind:class="{ 'reservation-price': Model.ProductType == 20 }">
                    <template v-if="Model.ProductType != 40">
                        <div class="actual-price price"> {{Model.ProductPrice.Price}} </div>
                    </template>
                    <template v-else>
                        <div class="actual-price price">
                            <template v-if="Model.ProductPrice.HighestBidValue > 0 ">
                                {{Model.ProductPrice.HighestBid}}
                            </template>
                            <template v-else>
                                {{Model.ProductPrice.StartPrice}}
                            </template>
                        </div>
                    </template>
                    <template v-if="Model.ProductPrice.OldPrice !== null">
                        <div class="old-price price"> {{Model.ProductPrice.OldPrice}} </div>
                    </template>
                </div>
            </div>
            <div class="desc" v-html="Model.ShortDescription"></div>
            <template v-if="Model.ProductAttributeModels.length > 0">
                <div class="attr-container">
                    <table>
                        <tbody>
                        <tr v-for="item in Model.ProductAttributeModels">
                            <td>
                                <div v-if="item.AttributeControlType !== 40 && item.AttributeControlType !== 45" class="attr-name"> {{item.Name}} </div>
                            </td>
                            <td>
                                <div class="attr-value">
                                    <template v-for="spec in item.Values">
                                        <template v-if="item.AttributeControlType == 1 || item.AttributeControlType == 2 || item.AttributeControlType == 3 || item.AttributeControlType == 50">
                                            <b-button variant="light" size="sm" class="name" :href="'/'+ Model.SeName + '?' + item.Name + '=' + spec.Name"> {{spec.Name}} </b-button>
                                        </template>
                                        <template v-if="item.AttributeControlType == 40">
                                            <template v-if="spec.ImageSquaresPictureModel.FullSizeImageUrl !== undefined">
                                                <b-button variant="light" size="sm" class="standard name color-container" :title="spec.Name" @@click="if(spec.PictureModel.FullSizeImageUrl !== null){vm.productImage($event)}" :data-href="spec.PictureModel.FullSizeImageUrl">
                                                    <span class="color" :style="'background-color:' + spec.ColorSquaresRgb">&nbsp;</span>
                                                </b-button>
                                            </template>
                                            <template v-else>
                                                <b-button variant="light" size="sm" class="standard name color-container" :title="spec.Name" :href="'/'+ Model.SeName + '?' + item.Name + '=' + spec.Name">
                                                    <span class="color" :style="'background-color:' + spec.ColorSquaresRgb">&nbsp;</span>
                                                </b-button>
                                            </template>
                                        </template>
                                        <template v-if="item.AttributeControlType == 45">
                                            <template v-if="spec.ImageSquaresPictureModel.FullSizeImageUrl !== undefined">
                                                <b-button variant="light" size="sm" class="standard p-1 name image-container" v-on:click="if(spec.PictureModel.FullSizeImageUrl !== null){vm.productImage($event)}" :data-href="spec.PictureModel.FullSizeImageUrl">
                                                    <b-img-lazy :src="spec.ImageSquaresPictureModel.ImageUrl" :alt="spec.Name"></b-img-lazy>
                                                </b-button>
                                            </template>
                                            <template v-else>
                                                <b-button variant="light" size="sm" class="standard p-1 name image-container" :href="'/'+ Model.SeName + '?' + item.Name + '=' + spec.Name">
                                                    <b-img-lazy :src="spec.ImageSquaresPictureModel.ImageUrl" alt="spec.Name"></b-img-lazy>
                                                </b-button>
                                            </template>
                                        </template>
                                    </template>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </template>
            <div class="mt-auto">
                <div class="list-button-container">
                    <template v-if="Model.ShowQty">
                        <input class="form-control input-group-addon catalog-quantity" type="number" :id="'addtocart_' + Model.Id + '_EnteredQuantity'" :name="'addtocart_' + Model.Id + '_EnteredQuantity'" value="1">
                    </template>
                    <template v-if="!Model.ProductPrice.DisableBuyButton">
                        <template v-if="!Model.ShowQty">
                            <a class="add-to-cart-button btn btn-outline-secondary" :onclick="'AxiosCart.addproducttocart_catalog(`@Url.RouteUrl("AddProductCatalog")/' + Model.Id +'/1?quantity=1`, `' + Model.ShowQty +'`,`' + Model.Id + '`);return false;'">
                                <span class="add-cart-text">
                                    <template v-if="Model.ProductType == 20">
                                        @Loc["ShoppingCart.Reservation"]
                                    </template>
                                    <template v-else>
                                        <template v-if="Model.ProductPrice.AvailableForPreOrder">
                                            @Loc["ShoppingCart.PreOrder"]
                                        </template>
                                        <template v-else>
                                            @Loc["ShoppingCart.AddToCart"]
                                        </template>
                                    </template>
                                </span> <span class="sr-only">AddToCart</span>
                            </a>
                        </template>
                        <template v-else>
                            <a class="add-to-cart-button btn btn-outline-secondary" :onclick="'AxiosCart.addproducttocart_catalog(`@Url.RouteUrl("AddProductCatalog")/' + Model.Id +'/1`, `' + Model.ShowQty +'`,`' + Model.Id + '`);return false;'">
                                <template v-if="Model.ProductType == 20">
                                    @Loc["ShoppingCart.Reservation"]
                                </template>
                                <template v-else>
                                    <template v-if="Model.ProductPrice.AvailableForPreOrder">
                                        @Loc["ShoppingCart.PreOrder"]
                                    </template>
                                    <template v-else>
                                        @Loc["ShoppingCart.AddToCart"]
                                    </template>
                                </template> <span class="sr-only">AddToCart</span>
                            </a>
                        </template>
                    </template>
                    <template v-else>
                        <template v-if="Model.ProductType == 40">
                            <a variant="info" class="add-to-cart-button btn btn-outline-secondary" :onclick="'AxiosCart.addproducttocart_catalog(`/addproducttocart/catalog/' + Model.Id +'/1?quantity=1`, `' + Model.ShowQty +'`,`' + Model.Id + '`);return false;'">
                                <span class="add-cart-text">@Loc["ShoppingCart.Bids"]</span> <span class="sr-only">AddToCart</span>
                            </a>
                        </template>
                    </template>
                    <div class="other-buttons">
                        <a title="@Loc["Products.QuickView"]" v-b-tooltip.hover.bottom class="quick-view-button btn btn-outline-secondary" data-target="ModalQuickView" :onclick="'AxiosCart.quickview_product(`@Url.RouteUrl("QuickView-Product")/' + Model.Id + '`);return false;'">
                            <b-icon icon="search"></b-icon>
                        </a>
                        <template v-if="!Model.ProductPrice.DisableWishlistButton && Model.ProductType == 0">
                            <template v-if="!Model.ShowQty">
                                <a v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToWishlist"]" class="btn btn-outline-secondary" :onclick="'AxiosCart.addproducttocart_catalog(`@Url.RouteUrl("AddProductCatalog")/' + Model.Id +'/2?quantity=1`, `' + Model.ShowQty +'`,`' + Model.Id + '`);return false;'">
                                    <b-icon icon="heart"></b-icon> <span class="sr-only">AddToWishlist</span>
                                </a>
                            </template>
                            <template v-else>
                                <a v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToWishlist"]" class="btn btn-outline-secondary" :onclick="'AxiosCart.addproducttocart_catalog(`@Url.RouteUrl("AddProductCatalog")/' + Model.Id +'/2`, `' + Model.ShowQty +'`,`' + Model.Id + '`);return false;'">
                                    <b-icon icon="heart"></b-icon> <span class="sr-only">AddToWishlist</span>
                                </a>
                            </template>
                        </template>
                        <template v-if="!Model.ProductPrice.DisableAddToCompareListButton && Model.ProductType == 0">
                            <a v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToCompareList"]" class="btn btn-outline-secondary" :onclick="'AxiosCart.addproducttocomparelist(`'+ Model.Id +'`, `@Loc["Products.ProductHasBeenAddedToCompareList.Link"]`, `@Url.RouteUrl("CompareProducts")`)'">
                                <span class="sr-only">AddToCompareList</span> <b-icon icon="shuffle"></b-icon>
                            </a>
                        </template>
                    </div>
                </div>
            </div>
        </b-card-body> <!--<template v-slot:footer> <template v-if="Model.SpecificationAttributeModels.length > 0"> <div class="spec-container"> <table> <tbody> <tr class="attr" v-for="item in Model.SpecificationAttributeModels" v-bind:id="item.SpecificationAttributeId"> <td> <div class="spec-name"> {{item.SpecificationAttributeName}} </div> </td> <td> <div class="spec-value"> <span v-html="item.ValueRaw"></span> </div> </td> </tr> </tbody> </table> </div> </template> <template v-if="Model.ProductAttributeModels.length > 0"> <div class="attr-container"> <table> <tbody> <tr v-for="item in Model.ProductAttributeModels" v-bind:id="item.ProductAttributeId"> <td> <div class="attr-name"> {{item.Name}} </div> </td> <td> <div class="attr-value"> <template v-for="spec in item.Values"> <template v-if="item.AttributeControlType == 1 || item.AttributeControlType == 2 || item.AttributeControlType == 3 || item.AttributeControlType == 50"> <b-button variant="light" size="sm" class="name" :href="'/'+ Model.SeName + '?' + item.Name + '=' + spec.Name"> {{spec.Name}} </b-button> </template> <template v-if="item.AttributeControlType == 40"> <template v-if="spec.PictureModel.FullSizeImageUrl.length > 0"> <b-button variant="light" size="sm" class="name color-container" :title="spec.Name" @@click="vm.productImage($event)" :data-href="spec.PictureModel.FullSizeImageUrl"> <span class="color" :style="'background-color:' + spec.ColorSquaresRgb">&nbsp;</span> </b-button> </template> <template v-else> <b-button variant="light" size="sm" class="name color-container" :title="spec.Name" :href="'/'+ Model.SeName + '?' + item.Name + '=' + spec.Name"> <span class="color" :style="'background-color:' + spec.ColorSquaresRgb">&nbsp;</span> </b-button> </template> </template> <template v-if="item.AttributeControlType == 45"> <template v-if="spec.PictureModel.FullSizeImageUrl.length > 0"> <b-button variant="light" size="sm" class="p-1 name image-container" v-on:click='productImage' :data-href="spec.PictureModel.FullSizeImageUrl"> <img :src="spec.ImageSquaresPictureModel?.ImageUrl" :alt="spec.Name" /> </b-button> </template> <template v-else> <b-button variant="light" size="sm" class="p-1 name image-container" :href="'/'+ Model.SeName + '?' + item.Name + '=' + spec.Name"> <img :src="spec.ImageSquaresPictureModel?.ImageUrl" alt="spec.Name" /> </b-button> </template> </template> </template> </div> </td> </tr> </tbody> </table> </div> </template>--> @*<div class="desc" v-html="Model.ShortDescription"></div>*@ <!--</template>-->
    </b-card>
</template>
<script asp-location="Footer" asp-order="118" type="module">
    Vue.component('product-box-list-vue', {
        template: '#product-box-list-vue',
        props: {
            Model: Object
        },
    });
</script>